<template>
  <a-modal v-model:open="visible" title="设备详情" destroyOnClose @ok="handleOk">
    <a-form ref="detailFormRef" :model="detailFormState" layout="horizontal">
      <a-form-item label="设备名称" name="name">
        <a-input v-model="detailFormState.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="设备编号" name="number">
        <a-input v-model="detailFormState.number" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="设备类型" name="type">
        <a-select v-model="detailFormState.type" allowClear placeholder="请选择" :options="options"></a-select>
      </a-form-item>
      <a-form-item label="技术参数" name="parameter">
        <a-input v-model="detailFormState.parameter" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="安装日期" name="date">
        <a-date-picker style="width: 100%" v-model="detailFormState.date" />
      </a-form-item>
      <a-form-item label="安装位置" name="location">
        <a-input v-model="detailFormState.location" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="维护记录">
        <a-button type="primary" html-type="submit" @click="showMaintenance">查看</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

  <LedgerMaintenanceModal ref="ledgerMaintenanceModal" @refresh="" />
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import LedgerMaintenanceModal from '/@/components/equipment-ledger-management/maintenance-modal.vue';
  defineExpose({
    showModal,
  });
  const emits = defineEmits(['refresh']);
  const defaultDetailForm = {
    name: undefined,
    number: undefined,
    type: undefined,
    parameter: undefined,
    date: undefined,
    location: undefined,
  };

  let detailFormState = reactive({
    ...defaultDetailForm,
  });

  const visible = ref(false);
  function showModal(data) {
    visible.value = true;
  }
  const formRef = ref();

  const options = reactive([
    {
      value: 'a1',
      label: 'a1',
    },
    {
      value: 'a2',
      label: 'a2',
    },
  ]);

  const checkGroupOptions = ref(['尖峰', '平时', '谷']);

  function handleOk() {
    visible.value = false;
  }

  const ledgerMaintenanceModal = ref();
  function showMaintenance() {
    ledgerMaintenanceModal.value.showModal();
  }
</script>
